<template>
	<view class="info">
		<block v-if="menuData.menuImgList">
			<swiper-list :swiperList="menuData.menuImgList" dataType="v"></swiper-list>
			<line-height></line-height>
			<view class="content">
				<view class="comm">
					{{menuData.menuComm}}
				</view>
				<view class="Materials" v-html="menuData.menuMaterials">

				</view>
			</view>
			<view class="bottomBtn">
				<view class="btn"><button open-type="share" class="lg text-gray cuIcon-forward" @click.stop="" style="color: #aaaaaa;"></button></view>
				<view class="btn"><text class="lg text-gray" @click.stop="adddz()" :class="menuData.isFabulous?'cuIcon-appreciatefill text-red-u':'cuIcon-appreciate'"></text></view>
				<view class="btn"><text class="lg text-gray" @click.stop="addsc()" :class="menuData.isCollection?'cuIcon-likefill text-red-u':'cuIcon-like'"></text></view>
			</view>
		</block>
	</view>
</template>

<script>
	import swiperList from '../../components/swiperList.vue'
	export default {
		components: {
			swiperList
		},
		data() {
			return {
				menuData: {},
				menuId: 1
			}
		},
		methods: {
			getMenuById() {
				this.$api.getMenuById({
					menuId: this.menuId
				}).then(res => {
					if (res.code) {
						this.menuData = res.data
					}
				})
			},
			adddz() {
				this.$api.addPraise({
					menuId: this.menuId
				}).then(res => {
					if (res.code) {
						this.$common.successToShow(res.data.info, () => {
							this.menuData.isFabulous = !this.menuData.isFabulous
							this.menuData.menuPraise = this.isFabulous ? this.fabulous + 1 : this.fabulous - 1;
						})
					}
				})
			},
			addsc() {
				this.$api.addFollow({
					menuId: this.menuId
				}).then(res => {
					if (res.code) {
						this.$common.successToShow(res.data.info, () => {
							this.menuData.isCollection = !this.menuData.isCollection
						})
					}
				})
			}
		},
		onLoad(option) {
			this.menuId = option.menuId || 1
			this.getMenuById()
		}
	}
</script>

<style lang="scss" scoped>
	.bottomBtn {
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		border-top: 1upx solid #dcdcdc;
		padding-left: 40upx;
		padding-right: 40upx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40upx;
			margin: 0upx 20upx;

			.text-red-u {
				color: red !important;
			}

		}
	}

	.info {
		background-color: #FFFFFF;
		min-height: 100vh;

		.content {
			padding: 60upx 20upx 20upx;

			.comm {
				font-size: 32upx;
				text-indent: 1;
				margin: 20upx auto;
			}

			.Materials {}
		}
	}

	button {
		background-color: transparent;
		border-radius: 0rpx;
		padding: 0rpx;
		margin: 0rpx;
		display: inline-block;
		line-height: 1;
		overflow: visible;
		// color: atuo;
		color: rgba(78, 101, 101, 1);
	}

	button::after {
		/*button的边框样式是通过::after方式实现的*/
		border: none;
	}

	.button-hover {
		/*点击后样式*/
		color: #000;
		// background-color: rgb(247, 247, 247);
	}
</style>
